<template>
	<!-- 商品模块 -->
	<view class="shop">
		<view v-for="item in shopList" :key="item.id" class="shop-item" @tap="toPage(item.id)">
			<uv-row>
				<uv-col :span="3">
					<uv-image :src="item.image[0] ? item.image[0] : '/static/images/default.png'" width="15vw"
						height="15vw" radius="2vw">
						<template v-slot:error>
							<uv-image src="/static/images/default.png" width="15vw" height="15vw"
								radius="2vw"></uv-image>
						</template>
					</uv-image>
				</uv-col>
				<uv-col :span="7">
					<view class="shop-info">
						<view class="shop-title">{{ item.name }}</view>
						<view class="shop-text">卡密商品</view>
						<view class="shop-text">
							售价
							<text class="shop-mark" :style="{ color: getTheme.themeColor }">¥{{ item.price }}</text>
						</view>
					</view>
				</uv-col>
				<uv-col span="2">
					<view>
						<uv-button text="查看详情" :color="getTheme.themeColor" size="mini" shape="circle"></uv-button>
					</view>
				</uv-col>
			</uv-row>
		</view>
	</view>
	<view class="divider">
		<uv-divider text="已经到底了"></uv-divider>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { productApi } from "@/api/index";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();

	const shopList = ref();
	const getshopList = async () => {
		try {
			const res = await productApi.getProductList({ category_id: null });
			shopList.value = res.data.list.slice(0, 6);
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getshopList();

	const toPage = (id) => {
		uni.navigateTo({
			url: `/pages/productDetails/productDetails?id=${id}`
		});
	};
</script>

<style lang="scss" scoped>
	.shop {
		.shop-item {
			padding: 2vw 3vw;
			border-bottom: 1rpx solid #eaedf2;

			.shop-info {
				transform: translate(-4vw);

				.shop-title {
					font-weight: 600;
					line-height: 50rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.shop-text {
					font-size: 26rpx;
					color: #999999;
				}

				.shop-mark {
					font-size: 34rpx;
					font-weight: 500;
					padding-left: 6rpx;
				}
			}
		}

		.shop-item:last-child {
			border-bottom: none !important;
		}
	}

	.divider {
		height: 180rpx;
	}
</style>